<!DOCTYPE HTML >
<html>
<head>
    <title>商城首页</title>
    <meta charset='utf-8'>
    <style type='text/css'>
        *{
            margin: 0;
            padding: 0;
            border: 0 none;
            font-family: 微软雅黑;
        }
        div{
            margin: 0;
            padding: 0;
        }
        a  {
            text-decoration: none;
            color: black;
        }
        ul li{
            list-style: none;
        }
        .all{
            min-width: 1240px;
            background-color:white;
            /*height: 1000px;*/
        }
        .wrapper{
            min-width: 1240px;

        }
        .top{
            width: 1240px;
            height: 35px;
            /*background-color: #00FF00;*/
            margin: 0 auto;
            position: relative;

        }
        .login{
            height:35px;
            line-height: 35px;
            float: left;
        }
        .login div div{
            float: left;
            font-size: 12px;
            color: #c1bec0;
            padding-right: 15px;
        }
        .search{
            width: 1240px;
            height:132px;
            /*line-height: 100px;*/
            margin:0 auto;
            padding-top: 30px;
            /*background-color:#bf314a;*/
            position:relative;
        }
        .research{
            width:472px;
            height: 40px;
            position: absolute;
            right: 200px;
            border: 1px solid #2cab3b;
        }
        .bought{
            width: 160px;
            height: 40px;
            line-height: 40px;
            position:absolute;
            right: 0;
            cursor: pointer;
            /*color: #555555;*/
            font-size: 12px;
            border: 1px solid #9f9f9f;
            background-color: #ffffff;

        }
        .search-more{
            color: #9f9f9f;
            font-size: 12px;
            width: 400px;
            height: 40px;
            line-height: 40px;
            position:absolute;
            left: 565px;
        }
        .search-more div {
            width:80px;
            height: 40px;
            line-height:40px ;
            float: left;
        }
        .smart-up{
            width: 1240px;
            height:42px;
            margin: 0 auto;
            position: absolute;
            bottom: 0;
            /*background-color:white;*/
        }
        .smart-left{
            width: 210px;
            height: 42px;
            line-height: 42px;
            background-color: #353435;
            position: absolute;
            cursor: pointer;
        }
        .smart-left div{
            float: left;
            color:white;
        }
        .smart-right{
            width: 830px;
            height: 42px;
            position: absolute;
            right: 200px;
        }
        .smart-right div{

            height: 42px;
            margin-left: 30px;
            color: #353435;
            text-align: center;
            line-height: 42px;
            float: left;
            cursor: pointer;
        }
        .center{
            width: 1240px;
            height: 380px;
            margin:20px auto;
            border: 1px solid #c1bec0;
            position: relative;
        }
        .center>div{
            position: relative;
        }
        .center-top{
            width: 1210px;
            height: 130px;
            margin:15px auto;
            border:1px solid #c1bec0 ;
        }
        .center-up{
            background-color: #82c92f;
            height: 40px;
        }
        .center-up >div{
            width: 170px;
            height:40px;
            line-height:40px;
            position: absolute;
            color: white;
            font-size: 12px;
        }
        .center-down{
            height: 90px;
            position: relative;
        }
        .center-down >div{
            position: absolute;
            overflow: hidden;
            white-space: normal;
        }
        .footer-up{
            height: 90px;
            /*line-height: 90px;*/
            width: 1240px;
            margin: 0 auto;
        }
        .footer-up>div{
            width: 309px;
            height: 60px;
            margin: 15px auto;
            line-height: 60px;
            float: left;
            /*text-align: center;*/
            border-right: 1px solid #9f9f9f;
            position: relative;
        }

        .footer-more{
            position: absolute;
            right:70px;
            width: 120px;
            font-size: 18px;
        }
        .footer-main{
            margin:25px auto;
            width: 1240px;
            height: 210px;
        }
        .footer-main >div{
            width: 200px;
            height: 210px;
            float: left;
        }
        .footer-main  a>div{
            font-size: 12px;
            color: #6f6f6f;
            margin-top: 20px;
        }
        .footer-down{
            margin: 0 auto;
            width: 1240px;
            height:80px;
            line-height: 80px;
            text-align: center;
            color: #979797;
            font-size: 12px;
        }
    </style>
</head>
    <body>
    <div class='all'>
        <!--登录-->
        <div class='wrapper' style="  background-color: #353435;">
            <div class='top'>
                <!--左边-->
                <div class='login' style='width: 995px;'>
                    <div>
                        <a href='#'><div>大客户采购</div></a>
                        <a href='#'><div>帮助中心</div></a>
                        <a href='#'><div>收藏本站</div></a>
                        <a href='#'><div>商品入住</div></a>
                        <a href='#'><div>老人手环申请</div></a>
                        <a href='#'><div>
                            <div style='width: 22px;height: 15px;padding:0;
                            background: url("../img/item1/all/tool.png") -2px -268px;position: absolute;top:10px;'></div>
                            <div style= 'padding-left: 25px'>手机商城</div
                            ></div></a>
                    </div>
                </div>
                <!--右边-->
                <div class='login' style='width: 245px;'>
                    <div>
                        <a href='#'><div style=''>登录</div></a>
                        <a href='#'><div>注册</div></a>
                        <a href='#'><div>|</div></a>
                        <a href='#'><div>F码购买</div></a>
                        <a href='#'><div style='padding: 0'>我的订单</div></a>
                    </div>
                </div>
            </div>
        </div>
        <div class='wrapper' style='border-bottom: 1px solid #353435;background-color: white;'>
            <div class='search' >
                <!--搜索栏-->
                <div style='width: 1240px;height: 42px;position:relative;'>
                    <!--柔柔商城图片-->
                    <div style='width: 150px;height: 40px;background: url("../img/item1/all/logo.png");position: absolute;'></div>
                    <div class='research'>
                        <div style='position: absolute'>
                            <form>
                                <input type='text' value='几米无屏电视' style='
                                 border: 0 none; width: 400px;
                                    color: #9f9f9f;
                                 height:40px;padding-left:15px'>
                            </form>
                        </div>
                        <div style='position: absolute;
                        cursor: pointer;
                        right: 0; width: 72px;height: 40px;line-height: 40px; background-color: #2cab3b;'>
                            <div style='width:72px;height: 40px;line-height: 40px;
                            background: url("../img/item1/all/tool.png") no-repeat 24px -110px'></div>
                        </div>
                    </div>
                    <!--我的购物车-->
                    <div class='bought' >
                        <div style='width: 20px;height: 15px;background: url("../img/item1/all/tool.png") 0 0;
                            position: absolute;left: 20px;top: 12px;'>
                        </div>
                        <div style='position: absolute;left: 45px;'>我的购物车</div>
                        <div style='position: absolute;left: 105px;color: #9f9f9f'>(0)</div>
                    </div>
                </div>
                <!--儿童手表-->
                <div class='search-more'>
                    <div>手机N4A</div>
                    <div>儿童手表5C</div>
                    <div>儿童机器人</div>
                    <div>安全路由5G</div>
                </div>
                <div class='smart-up'>
                    <!--左边-->
                    <div class='smart-left'>
                        <div style='width: 26px;height: 26px;margin:7px 10px 7px 30px;background: url("../img/item1/all/tool.png") no-repeat
                            3px -300px
        '></div>
                        <div>全部智能酷品</div>
                    </div>
                    <!--右边-->
                    <div class='smart-right'>
                        <div>手机</div>
                        <div>行车记录仪</div>
                        <div>儿童手表</div>
                        <div>摄像机</div>
                        <div>路由器</div>
                        <div>儿童机器人</div>
                        <div>老人手表</div>
                        <div>智品牌</div>
                        <div>社区</div>
                    </div>
                </div>
            </div>
        </div>


        <div class='wrapper' style="background-color: white;">
            <div class='center'>
                <div style='width: 1240px; height:50px;border-bottom: 1px solid #c1bec0;'>
                   <div style='font-size: 20px;line-height: 50px;padding-left: 30px;' > 我的购物车</div>
                </div>
                <div class='center-top'>
                    <div class='center-up'>
                        <div style='left: 30px'>商品信息</div>
                        <div style='right:510px'>单价</div>
                        <div style='right: 340px'>数量</div>
                        <div style='right:170px'>小计</div>
                        <div style='right: 0'>操作</div>
                    </div>
                    <div class='center-down' >
                        <div style='left: 30px;width: 500px'>
                            <div style='position: relative;width: 60px;height: 90px;'>
                            <img src='../img/item1/mall/car_shop.jpeg' width="60" height="90">
                            </div>
                            <div style='position: absolute;
                            top: 0;
                            right: 0;
                            overflow: hidden;
                            width: 440px;
                            color: #6e5e6e;
                            font-size: 12px;
                            white-space: normal;
                            height: 90px;
                            line-height: 90px'>
                                普宙BYRD Premium1.0专业四轴航牌无人机 尊爵黑（四轴 1080P相机 折叠）
                            </div>
                        </div>
                        <div style='left:510px;top: 35px;width: 90px;'>6488.00元</div>
                        <div style='right:400px;width:160px;top: 35px;height: 20px;'>

                            <div style='position: absolute;background-color: #82c92f;width: 20px;
height: 20px;text-align: center;line-height: 20px;font-size: 12px;color: white;left: 10px;'>一</div>
                            <div style='position: absolute;width: 55px;
height: 20px;text-align: center;line-height: 20px;right: 70px;background-color: #efefef;'>1</div>
                            <div style='position: absolute;background-color: #82c92f;width: 20px;
height: 20px;text-align: center;line-height: 20px;right:45px;color: white'>+</div>

                        </div>
                        <div style='right:300px;top: 35px;color: #ff7800'>6488.00元</div>
                        <div style='right: 145px;font-size: 12px;top: 35px;color: #9f9f9f'><a href='#'>删除</a></div>
                    </div>
                </div>
                <div style='top: 30px;height: 45px;'>
                    <div style='position: absolute;font-size:18px;font-weight: bold;right:160px;top:10px;'>商品总计：</div>
                    <div style='position: absolute;font-size:32px;font-weight: bold;color: #ff8301;right:35px'>6488.00</div>
                    <div style='position: absolute;font-size: 18px;font-weight: bold;right:15px;top:10px;'>元</div>
                </div>
                <div style='height: 50px;top:50px;'>
                    <a href='#'>
                        <div style='width:10px;height:30px;
                        border-right:1px solid #f6f6f6;
                        position: absolute;
                        right: 305px;
                        top: 5px;
                        '>

                        </div></a>
                    <a href='#'>
                        <div style='width:130px;height:40px;
                        background-color: #f6f6f6;
                        line-height: 40px;
                        text-align: center;
                        font-size: 18px;
                        color: #6e5e6e;
                        position: absolute;
                        right: 165px;
                        '>
                            继续购物
                        </div>
                    </a>
                    <a href='adress.html' target="_blank">
                        <div style='width:140px;height:40px;
                        background-color: #ff8301;
                        line-height: 40px;
                        text-align: center;
                        font-size: 18px;
                        color:white;
                        position: absolute;
                        right: 15px;
                        '>
                            去结算
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class='wrapper' style="background-color: #ffffff ">
            <div class='wrapper' style='border-top: 1px solid #c1bec0;
               margin: 0'>
                <div class='footer-up'>
                    <div >
                        <div style=' line-height:40px;font-size: 18px;color: #23ac38; text-align:center;
                        width: 40px;height: 40px;background: url("../img/item1/all/yuan.png");  position: absolute;top:10px;left:70px;'>
                            7
                        </div>
                        <div class='footer-more'>7天无理由退货</div>
                    </div>
                    <div >
                        <div style=' line-height:40px;font-size: 18px;color: #36ab3f; text-align:center;
                        width: 40px;height: 40px;background: url("../img/item1/all/yuan.png");  position: absolute;top:10px;left:70px;'>
                            15
                        </div>
                        <div class='footer-more'>15天免费换货</div>
                    </div>
                    <div >
                        <div style='
                        line-height:40px;font-size: 18px;color: #23ac38; text-align:center;
                        width: 40px;height: 40px;background: url("../img/item1/all/yuan.png");  position: absolute;top:10px;left:70px;'>
                      包
                        </div>
                        <div class='footer-more'>满99元包邮</div>
                    </div>
                    <div style='border-right: 0 none'>
                        <div style=' line-height:40px;font-size: 18px;color: #23ac38; text-align:center;
                        width: 40px;height: 40px;background: url("../img/item1/all/yuan.png");  position: absolute;top:10px;left:70px;'>
                           服
                        </div>
                        <div class='footer-more' >手机特色服务</div>
                    </div>

                </div>
            </div>
            <div class='wrapper' style='border-top: 1px solid #c1bec0;margin: 0'>
                <div class='footer-main'>
                    <div>
                        <div>帮助中心</div>
                        <a href='#'><div>用户注册</div></a>
                        <a href='#'><div>用户登录与密码找回</div></a>
                        <a href='#'><div>购买指南</div></a>
                        <a href='#'><div>支付方式</div></a>
                        <a href='#'><div>配送与说明</div></a>
                    </div>
                    <div>
                        <div>售后服务</div>
                        <a href='#'><div>7日无理由退换</div></a>
                        <a href='#'><div>质量问题 15 日内换货</div></a>
                        <a href='#'><div>保修条款</div></a>
                        <a href='#'><div>服务流程</div></a>
                        <a href='#'><div>安迷之家</div></a>
                    </div>
                    <div>
                        <div>特色服务</div>
                        <a href='#'><div>F码通道</div></a>
                        <a href='#'><div>360 生态</div></a>
                    </div>
                    <div>
                        <div>推广合作</div>
                        <a href='#'><div>商品入驻</div></a>
                        <a href='#'><div>大客户采购</div></a>
                    </div>
                    <div>
                        <div>关注柔柔商城</div>
                        <a href='#'><div>柔柔柔商城大事记</div></a>
                    </div>
                    <div style='position: relative'>
                        <div>联系我们</div>
                        <a href='#'>
                            <div style='width: 108px;
                                    height: 36px;
                                    background-image: url("../img/item1/all/onserver.png");
                                    position: absolute'>
                            </div>
                        </a>
                        <a href='#'>
                            <div style='width: 35px;height: 36px;
                                    background-image:url("../img/item1/all/weixin.png");
                                    position: absolute;left: 118px '>
                            </div>
                        </a>
                        <a href='#'>
                            <div style='width: 35px;height: 36px;
                                    background-image:url("../img/item1/all/xinlang.png");
                                    position: absolute;right: 0 '>
                            </div>
                        </a>


                    </div>
                </div>
            </div>
            <div class='wrapper' style='border-top: 1px solid #c1bec0'>
                <div class='footer-down'>
                    柔柔商城&copy;2013-2016公司版权所有 京ICP备08010314号-43 京公网安备11000002000006号
                </div>
            </div>
        </div>
    </div>
    </body>
</html>